.parent-inline-selector {
  color: white; }
  .child {
    color: black; }

.parent-block {
  color: white; }
  .child1 {
    color: green; }
  .child2 {
    color: blue; }
  .parent-block .step-child {
    color: black; }

.first {
  color: red; }

body .second {
  color: white;
  color: black; }
  .nested1 {
    color: blue;
    color: orange; }
    .nested2 {
      color: yellow; }

.third {
  color: green; }

@media print {
  .page {
    width: 8in; } }
  .page {
    color: red; }

@media (min-width: 300px) {
    .my-widget .inside-mq {
      inside-style: mq; } }
    .my-widget .outside-mq {
      outside-style: mq; }
    .outside-class {
      color: blue; }
  @media (min-width: 300px) {
      .with-only {
        color: pink; } }

@media screen and (max-width: 320px) {
  .foo {
    margin: 0; } }

@media screen and (max-width: 320px) {
      .bar {
        padding: 0; } }
  .baar {
    padding: 0; }
  .foo .barr {
    padding: 0; }


  .foo .bar {
    width: 0; }
  @supports ( display: flex ) {
      .baz {
        height: 0; } }

@media screen and (max-width: 640px) {
        .qux {
          margin: 0; } }

@media screen and (max-width: 640px) {
        .foo .quux {
          padding: 0; } }
  .foo .quix {
    padding: 0; }

.test .test2 {
  padding: 0px; }
  tbody {
    padding: 10px; }

a.badge {
  text-decoration: none; }

.badge-primary {
  background-color: blue; }
  a.badge-primary:focus, a.badge-primary.focus {
    outline: 0; }

.badge-secondary {
  background-color: yellow; }
  a.badge-secondary:focus, a.badge-secondary.focus {
    outline: 0; }

.table-hover tbody tr:hover, .table2#id tbody tr:hover {
  color: #ddd;
  background-color: #eee; }
  .table-hover tbody tr.foo, .table2#id tbody tr.foo {
    color: red; }

.badge {
  display: inline-block; }
  @media (prefers-reduced-motion: reduce) {
  .badge {
    transition: none; } }
  a.badge:hover, a.badge:focus {
    text-decoration: none; }

.btn:hover, .btn:focus {
  text-decoration: none; }

.other {
  content: "bar";
  content: "foo"; }
